@extends('layouts.app', ['activePage' => 'coach', 'titlePage' => '教练管理'])

@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header card-header-primary">
              <h4 class="card-title ">教练管理</h4>
            </div>
            <div class="card-body">
              @if (session('status'))
                <div class="row">
                  <div class="col-sm-12">
                    <div class="alert alert-success">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <i class="material-icons">close</i>
                      </button>
                      <span>{{ session('status') }}</span>
                    </div>
                  </div>
                </div>
              @endif
              <div class="row justify-content-between">
                <div class="col-md-auto mr-auto">
                  <ul class="nav">
                    <li class="nav-item">
                      <a class="nav-link {{ is_null(request()->type)?:'active' }}" href="?type">全部({{ $countAll }})</a>
                    </li>
                    <li class="nav-item {{ (request()->type !== 0)?:'active' }}">
                      <a class="nav-link" href="?type=0">未推荐({{ $countStatus0 }})</a>
                    </li>
                    <li class="nav-item {{ (request()->type !== 1)?:'active' }}">
                      <a class="nav-link" href="?type=1">待审核({{ $countStatus1 }})</a>
                    </li>
                    <li class="nav-item {{ (request()->type !== 2)?:'active' }}">
                      <a class="nav-link" href="?type=2">已推荐({{ $countStatus2 }})</a>
                    </li>
                  </ul>
                </div>
                <div class="col-auto">
                  <form class="navbar-form navbar-search" method="get">
                    <div class="input-group no-border">
                      <input type="text" name="search" class="form-control" placeholder="查找...">
                      <button type="submit" class="btn btn-white btn-round btn-just-icon">
                        <i class="material-icons">search</i>
                        <div class="ripple-container"></div>
                      </button>
                    </div>
                  </form>
                </div>
              </div>
              <div class="table-responsive">
                <table class="table">
                  <thead class="text-primary">
                  <th class="text-center">编号</th>
                  <th class="text-center">头像</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
                  <th class="text-center">介绍</th>
                  <th>创建时间</th>
                  <th>更新时间</th>
                  <th class="text-center">状态</th>
                  <th class="text-center">推荐</th>
                  <th class="text-right">操作</th>
                  </thead>
                  <tbody>
                  @if(is_null($coaches) || count($coaches)==0)
                    <tr>
                      <td class="text-center" colspan="10">没有更多数据</td>
                    </tr>
                  @endif
                  @foreach($coaches as $coach)
                    <tr id="coach-{{ $coach->id }}">
                      <td class="text-center">
                        {{ $loop->iteration }}
                      </td>
                      <td>
                        <img src="{{ $coach->image }}" class="rounded mx-auto d-block" width="50px" height="50px"
                             alt="Image of {{ $coach->name }}">
                      </td>
                      <td>
                        {{ $coach->name }}
                      </td>
                      <td>
                        {{ $coach->gender===0?'男':'女' }}
                      </td>
                      <td>
                        {{ $coach->birthdate->diffInYears() }}
                      </td>
                      <td class="table-col-intro" style="max-width: 550px">
                        {{ $coach->intro }}
                      </td>
                      <td class="table-col-created-at">
                        {{ $coach->created_at->toDateTimeString() }}
                      </td>
                      <td class="table-col-updated-at">
                        {{ $coach->updated_at->toDateTimeString() }}
                      </td>
                      <td class="text-center table-col-status">
                        {{-- $coach->status --}}
                        @switch($coach->status)
                          @case(0)
                          <span class="badge badge-default">屏蔽</span>@break
                          @case(1)
                          <span class="badge badge-success">在职</span>@break
                          @case(2)
                          <span class="badge badge-secondary">离职</span>@break
                          @default
                          未知状态
                        @endswitch
                      </td>
                      <td class="text-center table-col-rec">
                        {{-- $coach->status --}}
                        @switch($coach->rec_status)
                          @case(1)
                          <span class="badge badge-warning">待审核</span>@break
                          @case(2)
                          <span class="badge badge-success">已推荐</span>@break
                          @case(0)
                          <span class="badge badge-secondary">未推荐</span>@break
                          @default
                          未知状态
                        @endswitch
                      </td>
                      <td class="td-actions text-right">
                        <div class="btn-group" role="group">
                          <a rel="tooltip"
                             class="btn btn-success btn-link btn-coach-rec @if(!$coach->status || $coach->rec_status!=1)disabled @endif"
                             href="javascript:"
                             data-coach-rec=2 data-coach-id={{ $coach->id }}>
                            推荐
                            <div class="ripple-container"></div>
                          </a>
                          <a rel="tooltip"
                             class="btn btn-success btn-link btn-coach-rec @if(!$coach->status || !$coach->rec_status)disabled @endif"
                             href="javascript:"
                             data-coach-rec=0 data-coach-id={{ $coach->id }}>
                            不推荐
                            <div class="ripple-container"></div>
                          </a>
                        </div>
                        <a rel="tooltip" class="btn btn-success btn-link btn-coach-status" href="javascript:"
                           data-coach-rec={{ $coach->status }} data-coach-id={{ $coach->id }}>
                          {{ ($coach->status === 0)?'解除屏蔽':'屏蔽' }}
                          <div class="ripple-container"></div>
                        </a>
                      </td>
                    </tr>
                  @endforeach
                  </tbody>
                </table>
              </div>
            </div>
            <div class="card-footer justify-content-end">
              <div class="col-auto">
                {{ $coaches->links() }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script>
      $('.btn-coach-rec').on('click', function () {
          let id = $(this).attr('data-coach-id');
          let rec = $(this).attr('data-coach-rec');
          axios.patch(`/coach/${id}/rec`, {
              rec_status: rec
          }).then(res => {
              if (res.status === 200)
                  return res.data;
              else
                  reject(new Error(`[${res.status}]${res.statusText}: ${res.data}`));
          }).then(data => {
              console.log(data);
              let s = null;
              switch (data.rec_status) {
                  case '1':
                      s = '<span class="badge badge-warning">待审核</span>';
                      $(`#coach-${id} .btn-coach-rec`).removeClass('disabled');
                      break;
                  case '2':
                      s = '<span class="badge badge-success">已推荐</span>';
                      $(`#coach-${id} .btn-coach-rec:first`).addClass('disabled');
                      break;
                  case '0':
                      s = '<span class="badge badge-secondary">未推荐</span>';
                      $(`#coach-${id} .btn-coach-rec`).addClass('disabled');
                      break;
                  default:
                      console.log('Unknown rec result: ' + s);
              }
              $(`#coach-${id} .table-col-rec`).html(s);
            {{-- $(`#coach-${id} .btn-coach-edit`).hide(); --}}
            $(`#coach-${id} .table-col-updated-at`).text(data.updated_at);
              $(this).attr('data-coach-rec', data.rec_status);
          }).catch(e => console.log(e));
      });

      $('.btn-coach-status').on('click', function () {
          let id = $(this).attr('data-coach-id');
          let status = $(this).attr('data-coach-status');
          axios.patch(`/coach/${id}/status`, {
              status: status > 0 ? 0 : 1
          }).then(res => {
              if (res.status === 200)
                  // return res.data;
                  location.reload();
              else
                  reject(new Error(`[${res.status}]${res.statusText}: ${res.data}`));
          });
          // .then(data => {
          //     console.log(data);
          //     let s = null;
          //     switch (data.status) {
          //         case '1':
          //         case '2':
          //             s = '<span class="badge badge-success">在职</span>';
          //             $(`#coach-${id} .btn-coach-status`).text('屏蔽');
          //             $(`#coach-${id} .btn-coach-rec`).removeClass('disabled');
          //             break;
          //         case '0':
          //             s = '<span class="badge badge-default">屏蔽</span>';
          //             $(`#coach-${id} .btn-coach-status`).text('解除屏蔽');
          //             $(`#coach-${id} .btn-coach-rec`).addClass('disabled');
          //             break;
          //         default:
          //             console.log('Unknown status result: ' + s);
          //     }
          //     $(`#coach-${id} .table-col-status`).html(s);
          //   {{-- $(`#coach-${id} .btn-coach-edit`).hide(); --}}
          //   $(`#coach-${id} .table-col-updated-at`).text(data.updated_at);
          //     $(this).attr('data-coach-status', data.status);
          // }).catch(e => console.log(e));
      });
  </script>
@endpush
